/*
  Custom theme for highlight.js
  Based on "idea.css" and "darcula.css" themes of hljs distributive
*/

.highlightContainer {
  &:global(.hljs) {
    display: block;
    overflow-x: auto;

    color: var(--ring-code-color);
  }

  & :global(.hljs-subst),
  & :global(.hljs-title) {
    color: var(--ring-code-color);

    font-weight: normal;
  }

  & :global(.hljs-comment),
  & :global(.hljs-quote) {
    color: var(--ring-code-comment-color);

    font-style: italic;
  }

  & :global(.hljs-meta) {
    color: var(--ring-code-meta-color);
  }

  & :global(.hljs-section),
  & :global(.hljs-literal),
  & :global(.hljs-keyword),
  & :global(.hljs-type) {
    color: var(--ring-code-keyword-color);

    font-weight: var(--ring-font-weight-bold);
  }

  & :global(.hljs-name),
  & :global(.hljs-selector-pseudo),
  & :global(.hljs-selector-id),
  & :global(.hljs-selector-class) {
    color: var(--ring-code-tag-color);

    font-weight: var(--ring-code-tag-font-weight);
  }

  & :global(.hljs-selector-tag) {
    color: var(--ring-code-keyword-color);

    font-weight: var(--ring-code-tag-font-weight);
  }

  & :global(.hljs-attr) {
    color: var(--ring-code-field-color);

    font-weight: var(--ring-font-weight-bold);
  }

  & :global(.hljs-tag) > :global(.hljs-attr),
  & :global(.hljs-attribute) {
    color: var(--ring-code-attribute-color);

    font-weight: var(--ring-code-tag-font-weight);
  }

  & :global(.hljs-number),
  & :global(.hljs-regexp),
  & :global(.hljs-link) {
    color: var(--ring-code-number-color);

    font-weight: normal;
  }

  & :global(.hljs-string) {
    color: var(--ring-code-string-color);

    font-weight: var(--ring-font-weight-bold);
  }

  & :global(.hljs-doctag) {
    text-decoration: underline;
  }

  & :global(.hljs-variable),
  & :global(.hljs-template-variable) {
    color: var(--ring-code-field-color);
  }

  & :global(.hljs-addition) {
    background: var(--ring-code-addition-color);
  }

  & :global(.hljs-deletion) {
    background: var(--ring-code-deletion-color);
  }

  & :global(.hljs-emphasis) {
    font-style: italic;
  }

  & :global(.hljs-strong) {
    font-weight: var(--ring-font-weight-bold);
  }
}
